'use client';

import { RiRobot2Line, RiUser3Line, RiBrainLine } from '@remixicon/react';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { Components } from 'react-markdown/lib/ast-to-react';

export interface ChatMessageProps {
  role: 'user' | 'assistant' | 'system';
  content: string;
  status?: 'thinking' | 'error' | 'done';
  type?: 'text' | 'image' | 'video' | 'file';
}

interface CodeProps {
  node: any;
  inline: boolean;
  className: string;
  children: any;
  [key: string]: any;
}

export default function ChatMessage({ role, content, status = 'done', type = 'text' }: ChatMessageProps) {
  const components: Components = {
    code({ node, inline, className, children, ...props }: CodeProps) {
      const match = /language-(\w+)/.exec(className || '');
      return !inline && match ? (
        <SyntaxHighlighter
          style={tomorrow}
          language={match[1]}
          PreTag="div"
          {...props}
        >
          {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
      ) : (
        <code
          className={`${className} ${
            inline ? 'bg-gray-100 rounded px-1' : ''
          }`}
          {...props}
        >
          {children}
        </code>
      );
    },
  };

  // 根据角色和状态设置样式
  const getMessageStyle = () => {
    if (role === 'system') {
      return 'bg-gray-100 border border-gray-200';
    }
    if (role === 'user') {
      return 'bg-blue-500 text-white';
    }
    // assistant
    if (status === 'thinking') {
      return 'bg-white border border-gray-200 animate-pulse';
    }
    if (status === 'error') {
      return 'bg-red-50 border border-red-200 text-red-600';
    }
    return 'bg-white border border-gray-200';
  };

  // 获取头像图标
  const getAvatarIcon = () => {
    switch (role) {
      case 'user':
        return <RiUser3Line className="w-5 h-5 text-blue-500" />;
      case 'system':
        return <RiBrainLine className="w-5 h-5 text-gray-500" />;
      default:
        return <RiRobot2Line className="w-5 h-5 text-green-500" />;
    }
  };

  // 获取头像背景色
  const getAvatarBackground = () => {
    switch (role) {
      case 'user':
        return 'bg-blue-100';
      case 'system':
        return 'bg-gray-100';
      default:
        return 'bg-green-100';
    }
  };

  return (
    <div
      className={`flex gap-3 mb-4 ${
        role === 'user' ? 'flex-row-reverse' : ''
      }`}
    >
      {/* 头像 */}
      <div
        className={`w-8 h-8 rounded-full flex items-center justify-center ${getAvatarBackground()}`}
      >
        {getAvatarIcon()}
      </div>

      {/* 消息内容 */}
      <div
        className={`max-w-[80%] rounded-lg p-3 ${getMessageStyle()}`}
      >
        <ReactMarkdown
          components={components}
          className={`prose ${
            role === 'user' ? 'prose-invert' : ''
          } max-w-none`}
        >
          {content}
        </ReactMarkdown>
      </div>
    </div>
  );
} 